<template>
  <div id="searchBox">
    <Title title="搜索"></Title>
    <input
      type="text"
      class="search"
      v-model="value"
      @focus="apperHis"
      @keyup.enter="showRes(value)"
      placeholder="请输入要搜索的内容..."
    />

    <div class="searchMain">
      <div class="history">
        <ul v-show="showHistory" class="historyList">
          <li v-show="showHistory" class="history-header">
            搜索历史
            <p class="el-icon-delete" @click="clearHis"></p>
          </li>

          <el-tag
            v-for="(item,index) in historySearch"
            :key="item.keyWord"
            @click="searchHis(item.keyWord)"
            class="history-con"
            closable
            @close="handleClose(index)"
          >
            <span class="el-icon-time"></span>
            {{item.keyWord}}
          </el-tag>
        </ul>
      </div>
      <div class="pLists">
        <div class="showList" v-for="item in allPostsList" :key="item.id" @click="getPost(item)">
          <!-- 帖子标题 -->
          <h3>{{item.title}}</h3>
          <!-- 用户 -->
          <div class="user">
            <img :src="item.avatar" class="userAvatar" />
            <span>{{item.userName}}</span>
          </div>
          <!-- 帖子内容 -->
          <div class="posts">
            <div>{{item.intro}}</div>
          </div>
          <!-- 帖子图片 -->
          <div class="images">
            <img :src="item.coverImgUrl" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearch } from "../api/luntan-api";
import Title from "../components/Title.vue";

export default {
  components: {
    Title
  },
  data() {
    return {
      value: "",
      historySearch: [],
      showHistory: false,
      allPostsList: []
    };
  },
  methods: {
    handleClose(index) {
      this.historySearch.splice(index, 1);
      localStorage.setItem("searchWord", JSON.stringify(this.historySearch));
    },
    clearHis() {
      (this.historySearch = ""), localStorage.setItem("searchWord", "[]");
    },
    searchHis(keyWord) {
      this.value = keyWord;
      getSearch(this.value).then(res => {
        return (this.allPostsList = res.rows);
      });
      this.showHistory = false;
    },
    getPost(item) {
      this.$router.push({
        path: "/home/post-detail",
        query: {
          postsId: item.postsId
        }
      });
    },
    apperHis() {
      this.showHistory = true;
    },
    showRes() {
      if (this.value == "") {
        return;
      }
      getSearch(this.value).then(res => {
        if (res.rows != null || res.rows.length != 0) {
          this.showHistory = false;
        }
        this.allPostsList = res.rows;
      });
      if (this.value !== "") {
        let storage = window.localStorage;
        if (storage.getItem("searchWord") == null) {
          this.historySearch.unshift({ keyWord: this.value });
          storage.setItem("searchWord", JSON.stringify(this.historySearch));
        } else {
          if (
            !JSON.parse(storage.getItem("searchWord")).find(
              v => v.keyWord === this.value
            )
          ) {
            if (this.historySearch.length >= 6) {
              this.historySearch.pop();
            }
            this.historySearch.unshift({ keyWord: this.value });
            storage.setItem("searchWord", JSON.stringify(this.historySearch));
          }
        }
      }
    }
  },
  created() {
    if (this.value == "") {
      this.show = false;
      this.showHistory = true;
    } else {
      this.show = true;
      this.showHistory = false;
    }
    let storage = window.localStorage;
    if (storage.getItem("searchWord") !== null) {
      this.historySearch = JSON.parse(storage.getItem("searchWord"));
    }
  }
};
</script>

<style lang="less" scoped>
#searchBox {
  background-color: #f5f7fa;
}
.search {
  display: inline-block;
  width: 90%;
  height: 25px;
  margin: 10px;
  border: 1px solid #999;
  border-radius: 4px;
  outline: none;
  padding-left: 10px;
}
#el-button {
  margin-bottom: 2%;
}
.historyList {
  margin-left: 25px;
  // float: left;
  text-align: left;
}
.history-header {
  font-size: 16px;
  font-weight: 700;
}
.history-con {
  margin: 4px;
}
.searchMain {
  height: calc(100vh - 140px);
  overflow: scroll;
  background: #f5f7fa;
}
.pLists {
  height: calc(100vh - 120px);
  overflow: scroll;
  padding: 8px 0 20px;
  margin-top: 5px;
  box-sizing: border-box;
  // background: rgb(240, 240, 240);
  background: #f5f7fa;
}
.showList {
  // margin-left: 2%;
  // margin-right: 2%;
  box-shadow: 3px 3px rgba(242, 246, 252, 0.31);
  background: white;
  // border-radius: 15px;
  margin-bottom: 8px;
  overflow: hidden;
}
.user {
  display: flex;
  overflow: hidden;
  margin-left: 5px;
  margin-top: 4px;
  padding: 0 4px;
  width: 100%;
  img {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }
  span {
    display: inline-block;
    line-height: 200%;
    margin-left: 2px;
    font-size: 10px;
  }
}
h3 {
  width: 100%;
  margin-left: 5px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
  padding: 0 8px;
}
.posts {
  width: 73%;
  float: left;
  div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 2px 4px;
    text-align: left;
    font-size: 14px;
    color: #999;
  }
}
.images {
  padding: 2px;
  width: 100px;
  height: 80px;
  float: right;
  img {
    width: 100%;
    height: 100%;
  }
}
.el-icon-search:before {
  content: "\E778";
  background: #f2f6fc;
}
.el-icon-delete {
  float: right;
  margin-right: 25px;
}
ul {
  list-style: none;
}
</style>